<template>
	<view>
		<view class="topimg">
			<image v-if="info.image" :src="info.image" mode="aspectFill"></image>
			<image v-else :src="webconfigImg" mode="aspectFill"></image>
		</view>
		<view class="contet">
			<view class="cont_1">
				<image src="/static/trad/bb.png" mode=""></image>
				<view class="cont_1_ads">
					{{info.price}} <span>元</span>
				</view>
			</view>
			<view class="cont_2">
				<view class="title">
					{{info.name}}
				</view>
				<view class="address">
					{{info.gameZoneName}}
				</view>
				<view class="ttt">
					ID：{{info.account}} <span @click="$copyFun(info.account)">复制</span>
				</view>
				<view class="ttt" style="margin-top: 14rpx;">
					微信号：{{info.wechat}} <span @click="$copyFun(info.wechat)">复制</span>
				</view>
				<view class="ttt" style="margin-top: 14rpx;">
					手机号：{{info.phone}} <span @click="$copyFun(info.phone)">复制</span>
				</view>
			</view>

		</view>
		<view class="footer_btn" @click="opensss" v-if="isshowBtn">
			<view class="cont">
				<view class="btn">
					{{info.type == 1?'出售':"购买"}}
				</view>
			</view>
		</view>

		<uni-popup type="bottom" ref="popup4" :animation='false' :safe-area='false'>
			<view class="popup4">
				<view class="contetn">
					<uni-icons @click="close(4)" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">
						温馨提示
					</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="textsSclow">
							<view class="" v-html="safeOrderRemark">
							</view>
						</view>
					</scroll-view>
					<view class="btntext" v-if="yesBottom">
						请向下滑动阅读
					</view>
					<view class="btntext active" v-else @click="handleCreateOreder">
						我已联系到对方，可以开始交易
					</view>
				</view>
				<view class="imgs">
					<view class="btntexts" @click.self="close(4)">
						取消交易
					</view>
					<image src="@/static/btimg.png" mode=""></image>
				</view>
				<view class="bcgc"></view>
			</view>
		</uni-popup>


		<uni-popup type="center" ref="popup5" :animation='false' :safe-area='false'>
			<view class="popup5">
				<view class="contetn">
					<uni-icons @click="close(5)" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">
						温馨提示
					</view>
					<view class="ts" v-if="btntype == 1">
						对方正在交易中，暂不可交易
					</view>
					<view class="ts" v-if="btntype == 2">
						您当前有正在交易中的订单
					</view>
					<view class="btns_flex">
						<view class="b1" @click="close(5)">
							关闭
						</view>
						<view class="b2" v-if="btntype == 2" @click="gourl()">
							立即查看
						</view>
						<view v-if="btntype == 1" class="b2" @click="close(5)">
							我知道了
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		createOrder,
		searchinfo,
		checkOrder,
		webconfig ,
		login ,
		quotationdetail,
		
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
				orderID: 0,
				info: {},
				dypay: "",
				dyquery: '',
				dyprice: '',
				safeOrderRemark: '',
				yesBottom:true,
				btntype:0,
				urlID:0,
				isshowBtn:true
			};
		},
		onLoad(option) {
			this.orderID = option.shareId
			if (uni.getStorageSync('userToken')) {
				this.getwebconfig()
				quotationdetail(option.shareId).then(res => {
					if(res.code == 200){
						this.info = res.data
						if(uni.getStorageSync('userInfo').id == res.data.user.id){
							this.isshowBtn = false
						}else{
							this.isshowBtn = true
						}
					}
				})
			} else {
				this.handleLogin()
			}
		},
		methods: {
			gourl(){
				uni.navigateTo({
					url: `/pages/index/newpage/tradinfo?id=${this.urlID}`
				})
				this.close(5)
			},
			close(type) {
				if (type == 4) {
					this.$refs.popup4.close()
				}
				if (type == 5) {
					this.$refs.popup5.close()
				}
			},
			lower() {
				this.yesBottom = false
			},
			getwebconfig() {
				webconfig({}).then(res => {
					if (res.code == 200) {
						this.dypay = res.data.dypay
						this.dyquery = res.data.dyquery
						this.dyprice = res.data.dyprice
						this.safeOrderRemark = res.data.safeOrderRemark
					}
				})
			},
			opensss(item) {
				checkOrder({
					id:this.orderID
				}).then(res => {
					if (res.code == 200) {
						if (res.data.status) {
							if (res.data.type == 0) {
								this.btntype = 1
								this.$refs.popup5.open()
							} else {
								this.urlID = res.data.id
								this.btntype = 2
								this.$refs.popup5.open()
							}
						} else {
							this.yesBottom = true
							this.$refs.popup4.open()
						}
					}
				})
			},
			handleCreateOreder() {
				createOrder({
					id: this.orderID
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: `/pages/index/newpage/tradinfo?id=${res.data.id}`
						})
					}
				})
			},
			handleLogin() {
				uni.login({
					force: true,
					success: (r) => {
						login({
							code: r.code
						}).then(res => {
							if (res.code == 200) {
								uni.setStorageSync('openId', res.data.openId)
								uni.setStorageSync('userToken', res.data.token)
								uni.setStorageSync('loginTime', new Date().getTime())
								this.getwebconfig()
								quotationdetail(this.orderID).then(res => {
									if(res.code == 200){
										this.info = res.data
										if(uni.getStorageSync('userInfo').id == res.data.user.id){
											this.isshowBtn = false
										}else{
											this.isshowBtn = true
										}
									}
								})
							}
						})
					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.topimg {
		image {
			width: 100%;
			height: 500rpx;
		}
	}

	.contet {
		width: 690rpx;
		margin: -100rpx auto;
		position: relative;

		.cont_1 {
			width: 690rpx;
			height: 160rpx;
			background: linear-gradient(90deg, #FF6F07 0%, #FFA666 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			position: relative;

			image {
				width: 690rpx;
				height: 160rpx;
			}

			.cont_1_ads {
				width: 690rpx;
				height: 160rpx;
				position: absolute;
				top: 0%;
				padding: 16rpx 30rpx;
				box-sizing: border-box;
				font-family: 'DINB';
				font-weight: bold;
				font-size: 52rpx;
				color: #FFFFFF;

				span {
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}
		}

		.cont_2 {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: -58rpx;
			position: relative;
			padding: 28rpx 30rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #11192D;
			}

			.address {
				width: 630rpx;
				height: 60rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin: 20rpx auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				line-height: 60rpx;
				padding-left: 16rpx;
			}

			.ttt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FF6F07;
					margin-left: 10rpx;
				}
			}

		}
	}



	.popup5 {
		margin-bottom: 200rpx;

		.contetn {
			background-color: #fff;
			width: 620rpx;
			padding: 24rpx 40rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.icon {
				right: 24rpx;
				position: absolute;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				text-align: center;
				margin-top: 30rpx;
			}

			.ts {
				margin: 50rpx auto 56rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
			}

			.btns_flex {
				display: flex;
				justify-content: space-between;

				.b1 {
					width: 260rpx;
					height: 90rpx;
					background: #F9F9F9;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #D1CDCD;
					text-align: center;
					line-height: 90rpx;
				}

				.b2 {
					width: 260rpx;
					height: 90rpx;
					background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 90rpx;
				}
			}

		}
	}

	.popup4 {
		.contetn {
			background-color: #fff;
			width: 690rpx;
			height: 1100rpx;
			position: fixed;
			bottom: 0;
			left: 30rpx;
			padding: 24rpx 50rpx;
			box-sizing: border-box;
			border-radius: 30rpx 30rpx 0rpx 0rpx;

			.icon {
				right: 24rpx;
				position: absolute;
			}

			.title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				text-align: center;
				line-height: 50rpx;
				margin-top: 34rpx;
			}

			.textsSclow {
				height: 500rpx;
				// overflow: auto;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 54rpx;
				margin: 40rpx auto;
			}

			.btntext {
				height: 90rpx;
				background: #B6B6B6;
				border-radius: 6rpx;
				margin-top: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
			}

			.active {
				background: #F8883B;
				border-radius: 6rpx;
			}

		}

		.bcgc {
			width: 100%;
			height: 248rpx;
			background-color: #F88538;
		}

		.imgs {
			width: 100%;
			height: 248rpx;
			z-index: 9;
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: center;

			.btntexts {
				margin-top: 10rpx;
				border-radius: 6rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				line-height: 90rpx;
				color: #FF6F07;
				position: absolute;

			}

			image {
				width: 100%;
				height: 248rpx;
				vertical-align: bottom;
			}

		}
	}
</style>